<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志管理</title>
    <script src="../js/vue3.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/element-plus.js"></script>
    <script src="../js/icons-vue.js"></script>
    <script src="../js/zh-cn.js"></script>
    <link rel="stylesheet" href="../css/index.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }

        .container {
            max-width: 1800px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            padding: 20px 25px;
            background: linear-gradient(120deg, #3494e6, #ec6ead);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 24px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toolbar {
            padding: 15px 25px;
            background: #f9fafc;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .search-area {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .table-container {
            padding: 20px;
            overflow-x: auto;
        }

        .pagination {
            padding: 15px 25px;
            display: flex;
            justify-content: flex-end;
            border-top: 1px solid #ebeef5;
        }

        .status-badge {
            padding: 5px 10px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 500;
        }

        .success {
            background-color: #f0f9eb;
            color: #67c23a;
        }

        .warning {
            background-color: #fdf6ec;
            color: #e6a23c;
        }

        .danger {
            background-color: #fef0f0;
            color: #f56c6c;
        }

        .json-content {
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
        }

        .json-content:hover {
            white-space: normal;
            overflow: visible;
        }

        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .stats-cards {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .stat-card {
            flex: 1;
            min-width: 200px;
            background: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .stat-content {
            flex: 1;
        }

        .stat-number {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-title {
            font-size: 14px;
            color: #909399;
        }

        .filter-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        @media (max-width: 1200px) {
            .toolbar {
                flex-direction: column;
                align-items: flex-start;
            }

            .search-area {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="table-container">
            <el-table :data="paginatedData" stripe style="width: 100%" v-loading="loading" show-overflow-tooltip>

                <el-table-column prop="id" label="编号" width="80" sortable></el-table-column>
                <el-table-column prop="reqType" label="请求类型" width="100"></el-table-column>
                <el-table-column prop="reqUrl" label="请求地址" min-width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="fullClass" label="全类名" min-width="200"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column prop="method" label="请求方式" width="110">
                </el-table-column>
                <el-table-column prop="reqParams" label="请求参数" min-width="180">
                </el-table-column>
                <el-table-column prop="respData" label="响应数据" min-width="180">
                </el-table-column>
                <el-table-column prop="optTime" label="时间" width="160" sortable>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="scope">
                        <el-button size="small" @click="viewDetails(scope.row)">详情</el-button>
                        <el-button size="small" type="danger" icon="Delete" @click="deleteLog(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="pagination">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :page-sizes="[5, 10, 20, 50]"
                    v-model:page-size="pageSize"
                    v-model:current-page="currentPage"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange">

            </el-pagination>
        </div>
    </div>
</div>
<script>
    const {createApp, ref, computed, onMounted, nextTick} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;
    createApp({
        setup() {
            const currentPage = ref(1);
            const pageSize = ref(4);
            const paginatedData = ref([]);
            const total = ref(1);
            const getLog = () => {
                axios.get(`/log/${currentPage.value}/${pageSize.value}`).then(resp => {
                    //将返回回来的集合数据赋值给表格绑定的数据源变量
                    //   resp.data   Result(obj:自己的集合数据)
                    console.log(resp.data)
                    paginatedData.value = resp.data.data.list;
                    total.value = resp.data.data.total;
                })

            }
            const handleSizeChange = (val) => {
                pageSize.value = val;
                getLog();
            };

            const handlePageChange = (val) => {
                currentPage.value = val;
                getLog();
            };
            onMounted(() => {
                getLog();
            });

            //删除日志
            const deleteLog = (row) => {
                ElMessageBox.confirm(`确定要删除用户吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',

                }).then(() => {
                    // let mid = row.buildingId;
                    axios.delete(`/log/${row.id}`).then(resp => {
                        if (resp.data.code === 200) {
                            ElMessage.success(resp.data.msg);
                            getLog();
                        } else {
                            alert("删除失败")
                        }
                    }).catch(error => {
                        ElMessage.error(error.response.data.msg);
                    })
                })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '取消删除',
                        })
                    })
            }


            // 模拟日志数据
            return {
                currentPage,
                pageSize,
                paginatedData,
                getLog,
                total,
                handleSizeChange,
                handlePageChange,
                deleteLog,
            };
        }
    }).use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    }).mount('#app');
</script>
</body>
</html>